// JavaScript Document




// 控件基类
function Component(pV, bR){
	var _this = this;
	Sprite.call(_this,pV, bR);
	// onFocus 代表这个控件当前被鼠标指向但是并没有按下.
	_this.onFocus = false;
	// Pressed 代表这个控件已经被按下或即将执行其他操作.
	_this.Pressed = false;
	
	
	// 一般重写这个函数就阔以了.
	_this.onMouseClick = function(e){}
	
	// 下面的函数需要使用的时候再赋值
	// 不需要全部使用到
	// 用不到的留作扩展
	_this.onMouseDown = function(e){
		_this.Pressed = true;
	}
	// 默认函数, 如果需要重载 请自行在继承的GButton类中重写
	_this.onMouseOver = function(e){
		_this.onFocus = true;
	}
	_this.onMouseLeave = function(e){
		_this.Pressed = false;
		_this.onFocus = false;
	}
}

// 普通的按钮, 包含一张静止图片 和一张按下的图片(可以不用赋值, 也可以与静止图片一样),一张鼠标划过的图片
function GButton(pV,bR){
	var _this = this;
	Component.call(_this, pV, bR);
	_this.imgCount = 0;
	_this.imgNormal = undefined;
	// Focus 意思是鼠标悬停在上面时的图片
	_this.imgOnFocus = undefined;
	_this.imgOnPress = undefined;
	_this.ready = false;

	// 判断当前的状态选择不同的图片来绘制.
	_this.draw = function(canvas) {
		var cxt = canvas.getContext("2d");
		
		if(_this.Pressed)
		{
			cxt.drawImage(_this.imgOnPress, _this.position.x, _this.position.y);
			return;
		}
		if(_this.onFocus)
		{
			cxt.drawImage(_this.imgOnFocus, _this.position.x, _this.position.y);
			return;
		}
		cxt.drawImage(_this.imgNormal, _this.position.x, _this.position.y);
	}
	
	_this.imgLoadCallBack = function()
	{
		// 因为有3种图片, 所以imgCount等于3的时候就可以认为Ready了
		_this.imgCount += 1;
		if(_this.imgCount == 3)
		{
			_this.ready = true;
		}
	}

	var init = function() {
		_this.imgNormal = new Image();
		_this.imgNormal.onload = _this.imgLoadCallBack;
		
		_this.imgOnFocus = new Image();
		_this.imgOnFocus.onload = _this.imgLoadCallBack;
		
		_this.imgOnPress = new Image();
		_this.imgOnPress.onload = _this.imgLoadCallBack;
	}
	init();
}


// toggle按钮, 包含正反两张图片 和一张按下的图片(可以不用赋值, 也可以与静止图片一样),一张鼠标划过的图片
// 按下以后就会切换到反面, 再按一次就会切换到正面, 这就是toggle的意思
function GToggleButton(pV,bR){
	var _this = this;
	Component.call(_this, pV, bR);
	_this.imgCount = 0;
	
	// 用于指示是否已经切换到另一面:
	_this.toggled = false;
	
	// 正面:
	_this.imgFront = undefined;
	// 反面:
	_this.imgBack = undefined;
	// Focus 意思是鼠标悬停在上面时的图片
	_this.imgOnFocus = undefined;
	_this.imgOnPress = undefined;
	_this.ready = false;

	// 判断当前的状态选择不同的图片来绘制.
	_this.draw = function(canvas) {
		var cxt = canvas.getContext("2d");
		
		if(_this.Pressed)
		{
			cxt.drawImage(_this.imgOnPress, _this.position.x, _this.position.y);
			return;
		}
		if(_this.onFocus)
		{
			cxt.drawImage(_this.imgOnFocus, _this.position.x, _this.position.y);
			return;
		}
		if(_this.toggled)
		{
			cxt.drawImage(_this.imgBack, _this.position.x, _this.position.y);
		}
		else
		{
			cxt.drawImage(_this.imgFront, _this.position.x, _this.position.y);
		}
	}
	
	_this.onMouseClick = function(e){
		// 所有重写的这个函数都必须加上下面这一句...
		// 没办法. 因为js没有严格的"父类"概念, 因此这个类如果被继承,
		// 同时重写并调用了这个函数的话, 父类是不会执行这个函数的,
		// 所以按钮的翻面就必须自己来完成;
		_this.toggle();
	}
	
	_this.toggle = function(){
		if(_this.toggled == false)
		{
			_this.toggled = true;
		}
		else
		{
			_this.toggled = false;
		}
	}
	
	_this.imgLoadCallBack = function()
	{
		// 因为有4种图片, 所以imgCount等于4的时候就可以认为Ready了
		_this.imgCount += 1;
		if(_this.imgCount == 4)
		{
			_this.ready = true;
		}
	}

	var init = function() {
		_this.imgFront = new Image();
		_this.imgFront.onload = _this.imgLoadCallBack;
		
		_this.imgBack = new Image();
		_this.imgBack.onload = _this.imgLoadCallBack;
		
		_this.imgOnFocus = new Image();
		_this.imgOnFocus.onload = _this.imgLoadCallBack;
		
		_this.imgOnPress = new Image();
		_this.imgOnPress.onload = _this.imgLoadCallBack;
	}
	init();
}








//~~~~~~~~~~~  ---------华丽的分割线. 下面就是管理类了=========================

// 因为涉及到绘图, 所以这里传入Canvas和一个用于所监听事件的DOM
function GUI(Canvas, DOM){
	var _this = this;
	// 保存一个所监听的DOM对象和SceneManager
	_this.dom = undefined;
	_this.canvas = Canvas;
	// 使用SceneManager一样的管理机制, 用Array管理控件
	_this.ctrlList = undefined;
	// 这里加入了激活控件的列表.用于知道当前激活的控件
	_this.actingCtrlList = undefined;

	
	// 这里虽然只有Button一种Type 但是为了扩展. 这里还是先写了.
	_this.createController = function(type,pV, bR){
		switch(type)
		{
		case "GButton" :
				return new GButton(pV, bR);
				break;
		case "GToggleButton" :
				return new GToggleButton(pV,bR);
				break;
		}
		
	}
	
	_this.addController = function(component){
		_this.ctrlList.push(component);
		
	}
	
	_this.deleteController = function(component){
		
		for(var i = 0; i < _this.ctrlList.length; ++i)
		{
			if(	_this.ctrlList[i] === component)
			{
				_this.ctrlList = _this.ctrlList.removeAt(i+1);
				return;
			}
		}
	}
	
	_this.clearController = function(){

		_this.ctrlList = [];
		
		
	}
	//=================================
	_this.draw = function(){
		for(var i = 0; i < _this.ctrlList.length; ++i)
		{
			_this.ctrlList[i].draw(_this.canvas);
		}
	}
	
	
	// =============================================
	// 监听用回调函数
	_this.mouseMoveListener = function(e){
		var mouseX = e.clientX - _this.dom.offsetLeft;
	    var mouseY = e.clientY - _this.dom.offsetTop;
		for(var i = _this.actingCtrlList.length - 1; i >= 0; --i)
		{
			var ctrl = _this.actingCtrlList[i];
			if(!( mouseX > ctrl.position.x && 
				mouseX < ctrl.position.x + ctrl.box.width && 
				mouseY > ctrl.position.y &&
				mouseY < ctrl.position.y + ctrl.box.height))
			{
				ctrl.onMouseLeave(e);
			}
			
		}
		
		// 然后清空ActingCtrlList, 以便重新装入激活的控件
		while(_this.actingCtrlList.length != 0)
		{
			_this.actingCtrlList.pop();
		}
		
		for(var i = 0; i < _this.ctrlList.length; ++i)
		{
			var ctrl = _this.ctrlList[i];
			if( mouseX > ctrl.position.x && 
				mouseX < ctrl.position.x + ctrl.box.width && 
				mouseY > ctrl.position.y &&
				mouseY < ctrl.position.y + ctrl.box.height)
			{
				// 调用控件的mouseOver方法
				ctrl.onMouseOver(e);
				_this.actingCtrlList.push(ctrl);
			}
			
		}
	}
	_this.mouseClickListener = function(e){
		var mouseX = e.clientX - _this.dom.offsetLeft;
	    var mouseY = e.clientY - _this.dom.offsetTop;
		for(var i = 0; i < _this.ctrlList.length; ++i)
		{
			var ctrl = _this.ctrlList[i];
			if( mouseX > ctrl.position.x && 
				mouseX < ctrl.position.x + ctrl.box.width && 
				mouseY > ctrl.position.y &&
				mouseY < ctrl.position.y + ctrl.box.height)
			{
				// 调用控件的mouseOver方法
				ctrl.onMouseClick(e);
				
			}
			
		}
	}
	_this.mouseDownListener = function(e){
		var mouseX = e.clientX - _this.dom.offsetLeft;
	    var mouseY = e.clientY - _this.dom.offsetTop;
		for(var i = 0; i < _this.ctrlList.length; ++i)
		{
			var ctrl = _this.ctrlList[i];
			if( mouseX > ctrl.position.x && 
				mouseX < ctrl.position.x + ctrl.box.width && 
				mouseY > ctrl.position.y &&
				mouseY < ctrl.position.y + ctrl.box.height)
			{
				// 调用控件的mouseDown方法
				ctrl.onMouseDown(e);
				
			}
			
		}
	}
	
	
	
	// 下面两个函数留作扩展
	_this.keyDownListener = function(e){
		
	}
	_this.keyUpListener = function(e){
	}
	
	
	
	
	_this.ready = function() {
		return true;
	}
	
	var init = function(){
		_this.dom = DOM;
		_this.dom.addEventListener("click",_this.mouseClickListener,false);
		_this.dom.addEventListener("mousedown",_this.mouseDownListener,false);
		_this.dom.addEventListener("mousemove",_this.mouseMoveListener,false);
		_this.canvas = Canvas;
		_this.ctrlList = new Array();
		_this.actingCtrlList = new Array();
	}
	init();
		
}